<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理面板 - 个人博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/admin.css">
    <style>
        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        .container {
            max-width: 1200px;
        }

        /* navbar override removed; use global fragment styles */

        .navbar-brand {
            color: #66b2ff !important;
            font-weight: bold;
        }

        /* 移除页面级 nav-link 覆盖，统一使用全局片段交互样式 */

        .card {
            background-color: #1e1e1e;
            border: 1px solid rgba(102, 178, 255, 0.1);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            border-color: rgba(102, 178, 255, 0.3);
        }

        .card-header {
            background-color: rgba(102, 178, 255, 0.1);
            border-bottom: 1px solid rgba(102, 178, 255, 0.1);
            color: #66b2ff;
            font-weight: bold;
        }

        .card-body {
            padding: 20px;
        }

        .btn-primary {
            background-color: #66b2ff;
            border-color: #66b2ff;
        }

        .btn-primary:hover {
            background-color: #5095db;
            border-color: #5095db;
        }

        .btn-outline-primary {
            color: #66b2ff;
            border-color: #66b2ff;
        }

        .btn-outline-primary:hover {
            background-color: #66b2ff;
            color: #fff;
        }

        .table {
            color: #e0e0e0;
        }

        .table thead th {
            border-color: #333;
            color: #66b2ff;
        }

        .table td, .table th {
            border-color: #333;
        }

        .dashboard-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #66b2ff;
        }

        .dashboard-stats {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .dashboard-label {
            color: #aaa;
            font-size: 0.9rem;
        }

        .alert {
            margin-bottom: 20px;
            background-color: #1e1e1e;
            border: 1px solid rgba(102, 178, 255, 0.2);
            color: #e0e0e0;
        }

        .alert-success {
            border-left: 4px solid #28a745;
        }

        .alert-danger {
            border-left: 4px solid #dc3545;
        }
    </style>
</head>
<body class="admin-theme">
<!-- 导航栏 -->
<!-- 导航栏替换为统一片段 -->
<div th:replace="~{fragments/navbar :: navbar}"></div>

<div class="container">
    <!-- 显示消息 -->
    <div class="alert alert-success alert-dismissible fade show" th:if="${message}" role="alert">
        <i class="bi bi-check-circle-fill"></i> <span th:text="${message}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" th:if="${error}" role="alert">
        <i class="bi bi-exclamation-triangle-fill"></i> <span th:text="${error}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- 管理面板标题 -->
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h1><i class="bi bi-speedometer2"></i> 管理面板</h1>
        <div>
            <a href="/" class="btn btn-outline-primary" title="打开前台主页" data-bs-toggle="tooltip"><i class="bi bi-eye"></i> 查看网站</a>
        </div>
    </div>
    <p class="admin-section-desc mb-4">集中管理文章、分类、百宝箱及站点设置；常用操作路径最短。</p>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card text-center">
                <div class="card-body">
                    <i class="bi bi-file-earmark-text dashboard-icon"></i>
                    <div class="dashboard-stats" th:text="${#lists.size(posts) ?: 0}">0</div>
                    <div class="dashboard-label">文章总数</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center">
                <div class="card-body">
                    <i class="bi bi-tags dashboard-icon"></i>
                    <div class="dashboard-stats" th:text="${#lists.size(categories) ?: 0}">0</div>
                    <div class="dashboard-label">分类总数</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center">
                <div class="card-body">
                    <i class="bi bi-people dashboard-icon"></i>
                    <div class="dashboard-stats" th:text="${#lists.size(users) ?: 0}">0</div>
                    <div class="dashboard-label">用户总数</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快捷操作 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-lightning-charge"></i> 快捷操作
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <a href="/posts/new" class="btn btn-primary w-100" title="创建并发布新文章" data-bs-toggle="tooltip">
                                <i class="bi bi-file-earmark-plus"></i> 创建文章
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="/admin/categories" class="btn btn-primary w-100" title="分类的新增、编辑与删除" data-bs-toggle="tooltip">
                                <i class="bi bi-tags"></i> 管理分类
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="/admin/categories" class="btn btn-primary w-100" title="调整分类显示顺序" data-bs-toggle="tooltip">
                                <i class="bi bi-sort-numeric-down"></i> 分类排序
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="/admin/profile" class="btn btn-primary w-100" title="更新昵称与头像等资料" data-bs-toggle="tooltip">
                                <i class="bi bi-person-gear"></i> 个人信息
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="/admin/settings" class="btn btn-primary w-100" title="站点标题、导航等全局设置" data-bs-toggle="tooltip">
                                <i class="bi bi-sliders"></i> 网站设置
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近文章 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-file-earmark-text"></i> 最近文章
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>标题</th>
                                <th>分类</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="post : ${posts}" th:if="${post != null}">
                                <td>
                                    <a th:href="@{/posts/{id}(id=${post.id})}" th:text="${post.title}"
                                       class="text-info"></a>
                                </td>
                                <td>
                                    <span th:if="${post.category != null}" th:text="${post.category.name}"
                                          class="badge bg-secondary"></span>
                                    <span th:unless="${post.category != null}" class="badge bg-secondary">未分类</span>
                                </td>
                                <td th:text="${#temporals.format(post.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                                <td>
                                    <a th:href="@{/posts/{id}/edit(id=${post.id})}"
                                       class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button class="btn btn-sm btn-outline-danger"
                                            th:onclick="'if(confirm(\'确定要删除这篇文章吗？\')) { document.getElementById(\'delete-form-' + ${post.id} + '\').submit(); }'">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    <form th:id="'delete-form-' + ${post.id}"
                                          th:action="@{/posts/{id}/delete(id=${post.id})}" method="post"
                                          style="display:none;"></form>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(posts)}">
                                <td colspan="4" class="text-center">暂无文章</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="text-end">
                        <a href="/" class="btn btn-outline-primary btn-sm">查看全部文章</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户列表 -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-people"></i> 用户列表
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>角色</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="user : ${users}">
                                <td th:text="${user.username}"></td>
                                <td th:text="${user.email}"></td>
                                <td>
                                    <span th:each="role : ${user.roles}" class="badge bg-primary me-1"
                                          th:text="${#strings.replace(role.name, 'ROLE_', '')}"></span>
                                </td>
                                <td>
                                    <span th:if="${user.enabled}" class="badge bg-success">启用</span>
                                    <span th:unless="${user.enabled}" class="badge bg-danger">禁用</span>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(users)}">
                                <td colspan="4" class="text-center">暂无用户</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap 组件初始化已由 turbo-fixes.js 统一管理 -->
</body>
</html>